<template>
	<view class="" style="">
		<view class="profitbg">
			<view class="" :style="`height: ${statusBarHeight}px;`"></view>
			<view class="inform">
				<view class="inform-info" v-if="newsList.length>0">
					<view class="picture" @click="jump(`/pageB/news/news?type=0&name=${$t('user.name74')}`)">
						<!-- <image src="/static/newProject/gg_icon.png" mode=""></image> -->
					</view>
					<view class="info">
						<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false"
							:autoplay="true" :interval="3000" :duration="1000">
							<swiper-item v-for="(item,index) in newsList" :key="index">
								<view class="swiper-item" @click="jump(`/pageB/news/news?type=0&name=${$t('user.name74')}`)">
									<text class="one-omit">{{item.title}}</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- <view class="profitTtime" style="display: none;">
				<view class="left">
					<picker mode="date" fields="month" :end="newDay" @change="clickTab">
						<view :class=" 'profit_b active'">
							{{day}}
						</view>
					</picker>
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
				<view class="right flex" @click="show=true">
					{{sel_name}}
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
				<u-picker :show="show" keyName="name" :cancelText="$t('cancel')" :confirmText="$t('confirm')" @cancel='show=false' @confirm="confirm" :columns="tabList"></u-picker>
			</view> -->
			<view class="profitchart">
				<view class="charts-box">
					<view style="width: 100%; height:500rpx;margin-top: 0rpx;"><l-echart ref="chart1"></l-echart></view>
				</view>
			</view>
			<view class="profitkk"
				:style="scrollTop?'width:750rpx;transition: all 0.2s ease-in-out 0.2s;':'transition: all 0.2s ease-in-out 0.2s;'">
				<view class="flex-between">
					<view class="txt">
						<view class="">{{$t('profit.name3')}}</view>
						<view class="num">{{iconInfo.device_computer}}</view>
					</view>
					<view class="txt">
						<view class="">{{$t('panel.name6')}}</view>
						<view class="num flex" style="justify-content: center;">
							<view class=""> <span
									style="color: #00A3FF;">{{$t('profit.name5')}}</span>{{iconInfo.online_count}}
							</view>
							<view class=""> <span
									style="color: #FF5C4A;">{{$t('profit.name6')}}</span>{{iconInfo.unline_count}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex-between">
					<u-notify ref="uNotify" message="Hi uView"></u-notify>
					<view class="txt" style="margin-top: 16rpx;">
						<view class="flex" style="justify-content: center;" @click="btnNotfy($t('panel.name10'))">{{$t('panel.name16')}}
							<image src="../../static/annotation.png" style="width: 34rpx;height: 34rpx;"></image>
						</view>
						<view class="num">{{iconInfo.totalIncome}}</view>
					</view>
					<view class="txt" style="margin-top: 16rpx;">
						<view class="flex" style="justify-content: center;" @click="btnNotfy($t('panel.name18'))">{{$t('profit.name7')}}
							<image src="../../static/annotation.png" style="width: 34rpx;height: 34rpx;"></image>
						</view>
						<view class="num">{{iconInfo.dayIncome}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="profitbotbg">
			<view class="profitnum">
				<!-- <view class="isname">{{$t('profit.name9')}}</view> -->
				<view class="panelselty flex">
					<view class="selitem" :class="selIndex==1?'active':''" @click="selCharts?benselTy(1,'column'):''">
						{{$t('panel.name7')}}
					</view>
					<view class="selitem" :class="selIndex==2?'active':''" @click="selCharts?benselTy(2,'area'):''">
						{{$t('panel.name8')}}
					</view>
				</view>
				<view class="charts-box">
					<view style="width: 100%; height:340rpx;margin-top: -50rpx;"><l-echart ref="chart"></l-echart>
					</view>
					<!-- <qiun-data-charts :type="isChartsType" @complete='complete' :opts="selIndex==1?opts1:opts" :chartData="selIndex==1?chartData1:chartData" /> -->
					<!-- <view class="nodata" v-if="!iscomplete">
						<view class="">{{$t('noData')}}</view>
					</view> -->
				</view>

			</view>
			<view class="profitnum borbot">
				<view class="isname">{{$t('panel.name1')}}</view>
				<view class="profitbot">
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name2')}}</view>
						<view class="num">{{iconInfo.totalflow}}H/s</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name3')}}</view>
						<view class="num">{{iconInfo.income1M}}</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name4')}}</view>
						<view class="num">{{iconInfo.nandu}}P</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name21')}}</view>
						<view class="num">{{iconInfo.nextNandu}}P</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name22')}}</view>
						<view class="num">{{iconInfo.day}}{{$t('panel.name19')}}{{iconInfo.hour}}{{$t('panel.name20')}}</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name5')}}</view>
						<view class="num">￥{{iconInfo.price}}</view>
					</view>
				</view>
			</view>
			<view class="profitnum borbot">
				<view class="isname1">{{$t('panel.name12')}}</view>
				<view class="profitbot">
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name15')}}</view>
						<view class="num">{{iconInfo.currentFlow}}</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name13')}}</view>
						<view class="num">{{iconInfo.min}}</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t('panel.name14')}}</view>
						<view class="num">{{iconInfo.payInfo}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 170upx;">

		</view>
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				iconInfo: {
					totalIncome: 0,
					yesterIncome: 0,
					day: 0
				},
				lineData: [],
				lineData1: [],
				klinelist: [],
				day: 30,
				newDay: '',
				show: false,
				tabList: [],
				sel_name: '',
				selIndex: 1,
				isChartsType: 'column',
				selCharts: true,
				iscomplete: false,
				scrollTop: false,
				distribution:[],
				newsList:[]
			};
		},
		watch: {
			lineData() {
				// this.xrDom()
			}
		},
		onLoad() {
			// this.day = this.$fun.getYMD()
			this.newDay = this.$fun.getYMD()
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
		},
		onShow() {
			uni.hideTabBar()
			//模拟从服务器获取数据
			if (!this.iscomplete) {
				this.chartData = {}
			}
			this.getServerData()
			uni.setNavigationBarTitle({
				title: this.$t('tabbar.panel')
			})
			this.$fun.ajax.post('news/index', {
				type: 0
			}).then(res => {
				this.newsList = res.data;
			})
			this.getTab()
		},
		mounted() {

		},
		onPageScroll(e) {
			// e.scrollTop 表示当前页面滚动的距离
			// console.log('页面滚动距离：', e.scrollTop);
			// 在这里编写你的滚动相关逻辑
			if (e.scrollTop > 0) {
				this.scrollTop = true
			} else {
				this.scrollTop = false
			}

		},
		methods: {
			complete(res) {
				console.log(res)
				this.iscomplete = res.complete
			},
			btnNotfy(text) {
				this.$refs.uNotify.show({
					top: 0,
					type: 'error',
					color: '#000',
					bgColor: '#ffffff',
					message: text,
					duration: 1000 * 3,
					fontSize: 12,
					safeAreaInsetTop: true
				})
			},
			getTab() {
				this.$fun.ajax.post('otc/index', {}).then(res => {
					if (res.code == 1) {
						this.tabList = [res.data.list]
						this.sel_name = res.data.list[0].name
						this.publishSxf = res.data.list[0].sxf
						this.publishPrice = res.data.list[0].price
						this.payList = res.data.pay
						const ids = this.tabList.findIndex(i => i.id == this.id)
						if (ids !== -1) {
							this.active = ids
						}
					}
				});
			},
			confirm(item) {
				this.show = false
				this.sel_name = item.value[0].name
			},
			benselTy(sel, type) {
				this.selIndex = sel
				this.isChartsType = type
				this.onUecharts1()
			},
			onUecharts() {
				this.option1 = {
					tooltip: {
						trigger: 'axis',
						textStyle: {
							color: '#fff',
							fontSize: 9,
						},
						position: function(point) {
							return [point[0], '30%']; // 将 tooltip 固定在顶部 10% 的位置
						},
						padding: [
							5, // 上
							30, // 右
							5, // 下
							10, // 左
						],
						confine: true,
						backgroundColor: '#5555ff',
						formatter: function(params) {
							var color = params[0].color; // 获取数据项的颜色
							var symbol = '●'; // 自定义小圆点的形状
							var relVal = params[0].name;
							for (var i = 0, l = params.length; i < l; i++) {
								relVal += '\n' + params[i].marker + params[i].seriesName + ' : ' + params[i]
									.value + ' H/s';
							}
							return relVal;
						}
					},
					textStyle: {
						color: '#fff',
						fontSize: 9,
					},
					legend: {
						show: false,
						lineStyle: {
							// color: 'rgba(255, 255, 255, 0.2)',
							fontSize: 9,
						}
					},
					grid: {
						left: '0%',
						right: '0%',
						bottom: '6%',
						containLabel: true,
						show: true,
						borderColor: 'rgba(255, 255, 255, 0.2)',

					},
					xAxis: [{
						type: 'category',
						// splitNumber: 5, // 希望显示的刻度线数量
						boundaryGap: false,
						data: [],
						splitArea: {
							areaStyle: {
								color: ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.2)',
									'rgba(255, 255, 255, 0.3)'
								]
							}
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.2)',
								width: 1
							},

						},
						axisLabel: {
							color: '#fff',
							fontSize: 9,

						},
						// ... 其他配置项


					}],
					yAxis: [{
						name: "H/s",
						nameTextStyle: {
							align: 'right',
						},
						type: 'value',
						show: true,
						splitArea: {
							areaStyle: {
								color: ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.2)',
									'rgba(255, 255, 255, 0.3)'
								]
							}
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.2)',
								width: 1
							},

						},
						axisLabel: {
							color: '#fff',
							fontSize: 9,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.2)', // 红色网格线
								type: 'solid'
							}
						}
					}, ],
					series: [{
						name: this.$t('miner.name10'),
						type: 'line',
						stack: 'Total',
						// areaStyle: {},
						smooth: true,
						showSymbol: false, // 取消线上标记点
						emphasis: {
							focus: 'series'
						},
						data: [120, 132, 101, 134, 90, 230, 210],
						lineStyle: {
							color: '#ffffff'
						},
						itemStyle: {
							color: '#ffffff'
						},
					}, ]

				}
				let datelist = []
				this.klinelist.date.map((item) => {
					datelist.push(item.substring(5, item.length - 3))
				})
				this.option1.xAxis[0].data = datelist
				this.option1.series[0].data = this.klinelist.up
				this.option1.series[0].type = "line"
				this.option1.xAxis[0].name = 'H/s'
				this.option1.xAxis[0].axisLabel.formatter = function(value, index) {
					if (index === 0) {
						return '        ' + value;
					}
					if (index === datelist.length - 1) {
						return value + '        ';
					}
					return value;
				}
				if (this.option1.series[0].data.length == 0) {
					this.option1.yAxis[0].name = ''
					this.option1.title = {
						text: this.$t('noData'),
						x: 'center',
						y: 'center',
						textStyle: {
							fontSize: 10,
							fontWeight: 'normal'
						}
					}
				}
				this.$refs.chart1.init(echarts, chart => {
					chart.setOption(this.option1);
				});
			},
			onUecharts1() {
				if (this.selIndex == 1) {
					let option = {
						legend: {
							show: false,
						},
						grid: {
							top:'18%',
							left: '1%',
							right: '2%',
							bottom: '0%',
							containLabel: true
						},
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: '#1054E6' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#59DBE6' // 100% 处的颜色
							}],
						},
						tooltip: {
							trigger: 'axis',
							/*axisPointer: {
							type: "shadow"
							},*/
							backgroundColor: 'rgba(0, 59, 181, 0.8)',
							borderWidth: 0,
							textStyle: {
								color: '#fff',
								fontSize: 9,
								lineHeight: 15,
							},
							padding: [
								5, // 上
								30, // 右
								5, // 下
								10, // 左
							],
							extraCssText: 'border-radius: 8px',
							confine: true,
							position: function(point) {
								return [point[0], '20%']; // 将 tooltip 固定在顶部 10% 的位置
							},
						},
						axisPointer: {
							lineStyle: {
								color: '#2149c8',
							}
						},
						xAxis: {
							type: 'value',
							name:'H/s',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#e7e7e7',
									width: 1
								}
							},
							axisLabel: {
								color: '#8d9ea7',
								fontSize: 9,
								showMaxLabel: false
							},
							/*min: function(value) {
							return value.min;
							},*/
							// min: 0,
							// max: 100,
							// splitNumber: 10,
							axisTick: {
								show: false,
							},
							//nameRotate: -90,
							splitLine: {
								show: true,
								lineStyle: {
									opacity: 0.4
								}
							},
							nameLocation: 'end',
							nameTextStyle: {
								color: '#8D9EA7',
								fontSize: 9,
								align: 'right',
								verticalAlign:'top'
							},
							nameGap: 0,
						},
						yAxis: {
							type: 'value',
							name: this.$t('panel.name11'),
							axisLine: {
								show: true,
								lineStyle: {
									color: '#e7e7e7',
									width: 1
								}
							},
							splitLine: {
								lineStyle: {
									opacity: 0.4
								}
							},
							axisLabel: {
								color: '#8d9ea7',
								showMaxLabel: false,
								fontSize: 9,
							},
							// min: 0,
							// max: 10,
							/*max: function (value) {
							return value.max + 0.2;
							},*/
							//name: "worker num",
							nameLocation: 'end',
							nameTextStyle: {
								color: '#8D9EA7',
								fontSize: 9,
								align: 'center'
							},
							nameGap: 5,
							minInterval: 1
						},
						series: [{
							type: 'bar',
							name: this.$t('panel.name11'),
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 1,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#ffffff61'
									}, {
										offset: 1,
										color: '#ffffff'
									}],
								},
							},
						}],
						toolbox: {
							show: false,
						},
						brush: {
							throttleType: 'debounce',
							throttleDelay: 500,
							brushStyle: {
								borderWidth: 1,
								color: 'rgba(40,137,252,0.15)',
								borderColor: 'rgba(40,137,252,0.5)'
							},
							outOfBrush: {},
							xAxisIndex: 0
						}

					}
					let yMaxData1 = 0; //y轴最大值
					let max1 = 0;
					if (this.lineData1.count.length > 0) {
						max1 = Math.max.apply(Math, this.lineData1.count)
					}
					yMaxData1 = max1 > yMaxData1 ? max1 : yMaxData1; // 获取数据最大值
					option.yAxis.max = yMaxData1 + 5 - yMaxData1 % 5 //取与数据最大值相近的5的倍数
					let xMaxData1 = 0; //x轴最大值
					let xmax1 = 0;
					if (this.lineData1.key.length > 0) {
						xmax1 = Math.max.apply(Math, this.lineData1.key)
					}
					xMaxData1 = xmax1 > xMaxData1 ? xmax1 : xMaxData1; // 获取数据最大值
					option.yAxis.max = yMaxData1 + 5 - yMaxData1 % 5 //取与数据最大值相近的5的倍数
					option.xAxis.max= xMaxData1 + 5 - xMaxData1 % 5 
					option.series[0].type = "bar"
					option.series[0].barWidth = 10
					option.xAxis.data = this.lineData1.key.length>0?this.lineData1.key:['']
					option.yAxis.data = this.lineData1.count.length>0?this.lineData1.count:['']
					option.series[0].data = this.distribution.length > 0 ? this.distribution : [[0,0]]
					option.xAxis.name = 'H/s'
					option.yAxis.axisLabel.showMaxLabel=true
					// option.xAxis[0].boundaryGap=true
					// this.option.yAxis[0].axisLabel.margin= 20 // 调整这个值来增加或减少与y轴的距离
					if(this.lineData1.key.length>0){
						option.tooltip.formatter = ((params)=> {
							// console.log( params)
							var xAxisValue = option.xAxis.data[params[0].dataIndex];
							// 获取当前点击的柱子的 x 轴坐标值
							// console.log('X轴坐标值：', xAxisValue);
							// 执行其他逻辑
							let xMaxData1=xAxisValue; //x轴最大值
							let xmax1=0;
							
							xMaxData1 = xmax1 > xMaxData1 ? xmax1 : xMaxData1; // 获取数据最大值
							let right= xMaxData1 + 5 - xMaxData1 % 5 
							let left= xMaxData1 - xMaxData1 % 5 
							// console.log(left,right);
							var res =this.$t('miner.name4') + ': ' + xAxisValue+ 'H/s' + '\n';
							for (var i = 0, l = params.length; i < l; i++) {
								res += params[i].seriesName + ' : ' + params[0].data[1];
							}
							return res;
						})
					}else{
						option.tooltip.show=false
						option.xAxis.show=false
					}
					
					if (this.lineData1.count.length == 0) {
						// this.option.yAxis[0].name=''
						option.title = {
							text: this.$t('noData'),
							x: 'center',
							// y: 'center',
							bottom: '70',
							textStyle: {
								fontSize: 9,
								fontWeight: 'normal',
								fontFamily: 'PingFang SC',
								color: '#9f9f9f'
							}
						}
					}
					this.$refs.chart.init(echarts, chart => {
						chart.setOption(option);
					});
				} else {
					let onlineWorkerChartOption = {
						legend: {
							show: false,
						},
						grid: {
							top:'18%',
							left: '1%',
							right: '1%',
							bottom: '0%',
							containLabel: true
						},
						/*color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
						offset: 0, color: '#1054E6' // 0% 处的颜色
						}, {
						offset: 1, color: '#59DBE6' // 100% 处的颜色
						}],
						},*/
						tooltip: {
							trigger: 'axis',
							/*axisPointer: {
							type: "shadow"
							},*/
							backgroundColor: 'rgba(0, 59, 181, 0.8)',
							borderWidth: 0,
							textStyle: {
								color: '#fff',
								fontSize: 9,
								lineHeight: 15,
							},
							padding: [
								5, // 上
								30, // 右
								5, // 下
								10, // 左
							],
							extraCssText: 'border-radius: 8px',
							confine: true,
							position: function(point) {
								return [point[0], '20%']; // 将 tooltip 固定在顶部 10% 的位置
							},
						},
						axisPointer: {
							lineStyle: {
								color: '#2149c8',
							}
						},
						xAxis: {
							type: '',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#c1c1c1',
									width: 1
								}
							},
							/*min: function(value) {
							return value.min;
							},*/
							//splitNumber: $(window).width() > 991 ? 20 : 10,
							// axisTick: {
							// 	show: false,
							// },
							axisLabel: {
								fontSize: 9,
							},
							//nameRotate: -90,
							splitLine: {
								show: true,
								lineStyle: {
									opacity: 0.4
								}
							},
							nameLocation: 'end',
							nameTextStyle: {
								color: '#8D9EA7',
								fontSize: 9,
								align: 'right'
							},
							// nameGap: 0,
						},
						yAxis: {
							type: 'value',
							name: this.$t('panel.name11'),
							axisLine: {
								show: true,
								lineStyle: {
									color: '#e7e7e7',
									width: 1
								}
							},
							splitLine: {
								lineStyle: {
									opacity: 0.4
								}
							},
							axisLabel: {
								color: '#8d9ea7',
								showMaxLabel: false,
								fontSize: 9,
							},
							// min: 0,
							// max: 10,
							/*max: function (value) {
							return value.max + 0.2;
							},*/
							nameTextStyle: {
								color: '#8D9EA7',
								fontSize: 9,
								align: 'center'
							},
							nameGap: 5,
							minInterval: 1
						},
						series: [{
							type: 'line',
							name:this.$t('panel.name11'),
							showSymbol: false,
							smooth: false,
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 1,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#54CFE8'
									}, {
										offset: 1,
										color: '#2667F2'
									}],
								},
							},
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 1,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(84,207,232,0.12)'
									}, {
										offset: 1,
										color: 'rgba(38,103,242,0.6)'
									}],
								},
							},
						}],
					};
					let max = 0;
					if (this.lineData.count.length > 0) {
						max = Math.max.apply(Math, this.lineData.count)
					}
					let yMaxData = 0; //y轴最大值
					yMaxData = max > yMaxData ? max : yMaxData; // 获取数据最大值
					onlineWorkerChartOption.yAxis.max = yMaxData + 5 - yMaxData % 5 //取与数据最大值相近的5的倍数
					onlineWorkerChartOption.series[0].type = "line"
					onlineWorkerChartOption.xAxis.data = this.lineData.date.length>0?this.lineData.date:[0]
					onlineWorkerChartOption.series[0].data = this.lineData.count.length > 0 ? this.lineData.count : [0]
					onlineWorkerChartOption.xAxis.name = ''
					onlineWorkerChartOption.yAxis.axisLabel.showMaxLabel=true
					if(this.lineData.date.length>0){
						onlineWorkerChartOption.tooltip.formatter = ((params) => {
							// console.log( params)
							var res = this.$t('miner.name13')+': '+params[0].name + '\n';
							for (var i = 0, l = params.length; i < l; i++) {
								res +=  params[i].seriesName + ' : ' + params[i].value;
							}
							return res;
						})
					}else{
						onlineWorkerChartOption.tooltip.show=false
						onlineWorkerChartOption.xAxis.show=false
					}
					if (this.lineData.count.length == 0) {
						// this.option.yAxis[0].name=''
						onlineWorkerChartOption.title = {
							text: this.$t('noData'),
							x: 'center',
							// y: 'center',
							bottom: '70',
							textStyle: {
								fontSize: 9,
								fontWeight: 'normal',
								fontFamily: 'PingFang SC',
								color: '#9f9f9f'
							}
						}
					}

					this.$refs.chart.init(echarts, chart => {
						chart.setOption(onlineWorkerChartOption);
					});
				}

			},
			clickTab(e) {
				this.day = e.detail.value
				this.chartsDataLine1 = []
				this.getServerData()
				this.selCharts = false
				setTimeout(() => {
					this.selCharts = true
				}, 1200)
			},
			jump(url) {
				this.$fun.jump(url)
			},
			getServerData() {
				let data = []
				this.$fun.ajax.post('butt/buttIncomeList', {
					day: this.day
				}).then(res => {
					let nextTime=this.dateDiff(res.data.nextTime)
					console.log(nextTime)
					res.data.day=nextTime.days
					res.data.hour=nextTime.hours
					this.iconInfo = res.data
					this.lineData1 = res.data.distribution?res.data.distribution:{key:[],count:[]} //{key:[3,13,14,22],count:[1,2,1,1]
					let data=[]
					for (var i = 0; i < this.lineData1.key.length; i++) {
						data.push([ this.lineData1.key[i],this.lineData1.count[i]])
					}
					this.distribution= data //[[3,1],[13,2],[14,1],[22,1]]
					this.lineData = res.data.bind
					this.klinelist = res.data.kline
					uni.setStorageSync('klinelist', res.data.kline)
					this.onUecharts()
					this.onUecharts1()
				})
			},
			dateDiff(date) {
			  const dt1 = new Date().getTime();
			  const dt2 = date*1000
			  const diff = Math.abs(dt2 - dt1); // 计算两日期的差值（毫秒）
			 
			  const days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 计算天数
			  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算小时数
			 
			  return { days, hours };
			}
		}
	};
</script>

<style lang="scss">
	page {
		// height: 100%;
		// background: url('/static/imgbgc2.png') no-repeat;background-size: 100% 100%;
		overflow-y: scroll;
		background-color: #FFFFFF;
	}
	.inform {
		// margin: 20rpx 30rpx;
		// position: relative;
		// z-index: 1;
		.inform-info {
			background-color: #1d51ff;
			display: flex;
			align-items: center;
			height: 44rpx;
			// border-radius: 30rpx;
			
	
			.picture {
				display: flex;
				align-items: center;
				margin-right: 30rpx;
				height: 12rpx;
				width: 12rpx;
				background-color: #FFFFFF;
				border-radius: 50%;
				margin-left: 30rpx;
				image {
					width: 12rpx;
					height: 12rpx;
				}
			}
	
			.info {
				width: 80%;
				height: 100%;
	
				.swiper {
					width: 100%;
					height: 100%;
	
					.swiper-item {
						display: flex;
						align-items: center;
						width: 100%;
						height: 100%;
	
						text {
							font-size: 22rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	.profitbg {
		width: 750rpx;
		// height: 530rpx;
		background: linear-gradient(180deg, #3c62e1 0%, #5694f8 100%);
	}

	.profit {
		width: 690rpx;
		height: 158rpx;
		// background: linear-gradient(180deg, #5990FF 0%, #55aaff 100%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin: 20rpx auto 0;
		position: relative;

		&_top {
			text-align: center;
			padding-top: 30rpx;
		}

		.name {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.num {
			font-weight: 500;
			font-size: 60rpx;
			color: #FFFFFF;
		}

		.right {
			font-weight: 500;
			font-size: 20rpx;
			width: 124rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			background: #5990FF;
			border-radius: 0rpx 24rpx 0rpx 24rpx;
			color: #FFFFFF;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.profitTtime {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		width: 750rpx;
		height: 88rpx;
		align-items: center;
		// background: #FFFFFF;

		image {
			width: 28rpx;
			height: 28rpx;
		}

		.left {
			display: flex;
			align-items: center;
		}

		.right {
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.profitkk {
		width: 690rpx;
		// height: 380rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin: 0 auto;
		font-weight: 300;
		font-size: 22rpx;
		color: #818181;
		padding: 40rpx 30rpx;
		position: sticky;
		top: 10px;

		.txt {
			width: 46%;
			text-align: center;
		}

		.num {
			font-weight: 500;
			font-size: 32rpx;
			color: #537eff;
			margin-top: 18rpx;

			span {
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
				margin-right: 30rpx;
			}
		}
	}

	.profitchart {
		width: 750rpx;
		// height: 400rpx;
		// background: #FFFFFF;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 0rpx 22rpx;

		.charts-box {
			width: 100%;
			padding: 0 10rpx;
			// height: 566rpx;
			// padding-right: 30rpx;
		}
	}

	.profitbotbg {
		background-color: #FFFFFF;
		// border-radius: 20rpx 20rpx 0 0;
		margin-top: -60px;
		padding-top: 40px;
	}

	.profitbot {
		font-size: 22rpx;
		font-weight: 400;
		padding: 0 30rpx;

		.profitbottitle {
			font-size: 32rpx;
			font-weight: 600;
			color: #232323;
			margin-bottom: 20rpx;
		}

		.profitbottxt {
			margin-top: 24rpx;
			color: #9f9f9f;

			.num {
				color: #000;
			}
		}
	}

	.borbot {
		border-bottom: 1rpx solid #f4f4f2;
	}

	.profitnum {
		// width: 690rpx;
		// height: 366rpx;
		// background: #FFFFFF;
		// border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #232323;
		margin: 0 auto;
		padding: 30rpx 0;

		.panelselty {
			padding: 30rpx;
			margin-top: 20rpx;

			.selitem {
				// width: 200rpx;
				height: 50rpx;
				padding: 0 10rpx;
				line-height: 50rpx;
				text-align: center;
				color: #9f9f9f;
				border-radius: 10rpx;
				font-weight: 300;
				font-size: 22rpx;
			}

			.active {
				background-color: #5990ff45;
				color: #5990ff;
			}
		}

		.isname {
			// height: 80rpx;
			line-height: 60rpx;
			background-color: #f7f7f7;
			padding: 0 30rpx;
		}

		.isname1 {
			padding: 0 30rpx;
		}

		.charts-box {
			width: 100%;
			height: 300rpx;
			// margin-top: 20rpx;
			padding: 0 30rpx;
			position: relative;

			.nodata {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 50%;
				color: #9f9f9f;
			}
		}
	}

	.profitdetail {
		width: 690rpx;
		margin: 10rpx auto 20rpx;

		.name {
			font-weight: 600;
			font-size: 32rpx;
			color: #232323;
			margin-top: 30rpx;
		}

		.tabname {
			font-weight: 500;
			font-size: 24rpx;
			color: #5990FF;
			display: flex;
			align-items: center;
			text-align: center;
			height: 60rpx;
			background: #00aaff10;
			padding: 0 20rpx 0 10rpx;
			margin-top: 20rpx;

			view {
				width: 25%;
			}
		}

		.list {
			width: 690rpx;
			height: 100rpx;
			// background:  rgba(68, 78, 99, 0.7);
			font-weight: 400;
			font-size: 24rpx;
			color: #232323;
			display: flex;
			align-items: center;
			text-align: center;

			.col {
				color: #5990FF;
			}

			view {
				width: 25%;
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>